<template>
    <div class="set-container">
        <!-- 标题区域开始 -->
        <div class="title-wrap">
            <div class="left-wrap">
                <i class="iconfont icon-mima"></i>
                <span>修改密码</span>
            </div>
        </div>
        <!-- 标题区域结束 -->

        <!-- 内容区域开始 -->
        <div class="content-wrap">
            <el-form :model="formData" style="width: 70%;">
                <!-- 原密码 -->
                <el-form-item label="原密码" :label-width="formLabelWidth" prop="raw_password">
                    <el-input v-model="formData.raw_password" autocomplete="off" maxlength="30"
                show-word-limit clearable placeholder="请输入原密码" type="password" show-password/>
                </el-form-item>

                <!-- 新密码 -->
                <el-form-item label="新密码" :label-width="formLabelWidth" prop="new_password">
                    <el-input v-model="formData.new_password" autocomplete="off" maxlength="30"
                show-word-limit clearable placeholder="请输入新密码" type="password" show-password/>
                </el-form-item>

                <!-- 确认密码 -->
                <el-form-item label="确认密码" :label-width="formLabelWidth" prop="repassword">
                    <el-input v-model="formData.repassword" autocomplete="off" maxlength="30"
                show-word-limit clearable placeholder="请输入确认密码" type="password" show-password/>
                </el-form-item>

                <div style="display: flex;justify-content: flex-end;">
                    <el-button type="primary" @click="handlerSave" size="large">保存</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref } from "vue"
import { useUserStore } from "@/stores/modules/user"
import { ElNotification } from 'element-plus'


// 用户存储
const userStore = useUserStore()

const formData = reactive({
	raw_password: '',
	new_password: '',
	repassword: '',
})

const formLabelWidth = ref('100px')


const handlerSave = async () => {
    if (formData.raw_password == '') {
        ElNotification.error('请输入原密码')
        return false
    }

    if (formData.new_password == '') {
        ElNotification.error('请输入新密码')
        return false
    }

    if (formData.new_password != formData.repassword) {
        ElNotification.error('两次密码不一致')
        return false
    }
    
    await userStore.changePassword(formData)

    ElNotification.success('修改成功')

    formData.new_password = ''
    formData.new_password = ''
    formData.repassword = ''
}

</script>

<style scoped lang="scss">
.set-container {
    background-color: #fff;
    padding: 0 15px 15px 15px;
    .title-wrap {
        padding: 15px 0;
        font-size: 18px;
        border-bottom: 1px solid #f5f5f5;
        color: $price-color;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left-wrap {
            display: flex;
            align-items: center;
            .iconfont {
                font-size: 24px;
                margin-right: 5px;
            }
        }
    }

    .content-wrap {
        padding-top: 20px;
    }
}
</style>